<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import MembershipPlanCard from '@/components/MembershipPlanCard.vue'

const router = useRouter()


const membershipPlans = ref([
    {
        id: 1,
        name: '月度会员',
        price: 15,
        originalPrice: 30,
        duration: '1个月',
        benefits: [
            '专享优惠券',
            '免费配送',
            '专属客服',
            '生日特权'
        ],
        popular: false
    },
    {
        id: 2,
        name: '季度会员',
        price: 40,
        originalPrice: 90,
        duration: '3个月',
        benefits: [
            '专享优惠券',
            '免费配送',
            '专属客服',
            '生日特权',
            '积分加倍'
        ],
        popular: true
    },
    {
        id: 3,
        name: '年度会员',
        price: 128,
        originalPrice: 360,
        duration: '12个月',
        benefits: [
            '专享优惠券',
            '免费配送',
            '专属客服',
            '生日特权',
            '积分加倍',
            '专属活动'
        ],
        popular: false
    }
])

const selectedPlan = ref(2) // 默認選中季度會員

const selectPlan = (planId: number) => {
    selectedPlan.value = planId
}

const confirmMembership = () => {
    console.log('开通会员:', selectedPlan.value)
    alert('会员开通成功！')
    router.push('/profile')
}
</script>

<template>
    <div class="min-h-screen bg-gray-50">
        <div
            class="w-full h-12vw bg-blue-500 text-white text-4.8vw fixed left-0 top-0 z-1000 flex justify-center items-center">
            开通会员
        </div>

        <div class="bg-gradient-to-r from-yellow-400 to-orange-500 p-6 text-white">
            <div class="text-center">
                <h2 class="text-2xl font-bold mb-2">饿了么超级会员</h2>
                <p class="text-lg opacity-90">享受专属优惠，畅享美食生活</p>
            </div>

            <div class="grid grid-cols-2 gap-4 mt-6">
                <div class="text-center">
                    <div class="text-3xl font-bold">¥15</div>
                    <div class="text-sm opacity-80">起/月</div>
                </div>
                <div class="text-center">
                    <div class="text-3xl font-bold">50%</div>
                    <div class="text-sm opacity-80">优惠券</div>
                </div>
            </div>
        </div>

        <div class="p-4">
            <h3 class="text-lg font-semibold mb-4 text-gray-800">选择套餐</h3>

            <div class="space-y-4">
                <MembershipPlanCard
                  v-for="plan in membershipPlans"
                  :key="plan.id"
                  :plan="plan"
                  :selected="selectedPlan === plan.id"
                  @select="selectPlan" />
            </div>
        </div>
        <!--底部栏-->
        <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 p-4">
            <div class="flex items-center justify-between mb-3">
                <span class="text-gray-600">总计：</span>
                <span class="text-xl font-bold text-red-500">
                    ¥{{ membershipPlans.find(p => p.id === selectedPlan)?.price }}
                </span>
            </div>

            <el-button type="primary" class="w-full h-12 text-lg" @click="confirmMembership">
                立即开通
            </el-button>
        </div>
    </div>
</template>
